<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/index3.css" />
		<!--<link rel="stylesheet" href="css/base.css">-->
		<link rel="stylesheet" href="css/bannerList.css">
	</head>

	<body>
		<div id="bannerChange" style="height: 50px;">
			<input id="banner_1" type="radio" name="bannerType" value="1" /><label for="banner_1">闪动切换</label>
			<input id="banner_2" type="radio" name="bannerType" value="2" /><label for="banner_2">滑动切换</label>
			<input id="banner_3" type="radio" name="bannerType" value="3" checked/><label for="banner_3">缩放切换</label>
			
		</div>
		<div id="bannerBox" class="flexslider">
			<ul class="slides">
				<li style="background:url(img/img1.jpg) 50% 0 no-repeat;"></li>
				<li style="background:url(img/img2.jpg) 50% 0 no-repeat;"></li>
				<li style="background:url(img/img3.jpg) 50% 0 no-repeat;"></li>
				<li style="background:url(img/img4.jpg) 50% 0 no-repeat;"></li>
				<li style="background:url(img/img5.jpg) 50% 0 no-repeat;"></li>
			</ul>
			<div class="rollNode left-btn"></div>
			<div class="rollNode right-btn"></div>
			<div class="rollNode img-btn-list"></div>
		</div>

		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
		<script src="js/bannerList.js"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				var bannerTypeVal = sessionStorage.getItem('bannerTypeVal');
				$('#bannerChange input:radio[value="' + bannerTypeVal + '"]').attr('checked', true);
				bannerTypeFn(bannerTypeVal);

				$('input[name="bannerType"]').on('change', function() {
					var bannerTypeVal = $('input[name="bannerType"]:checked').val();
					sessionStorage.setItem('bannerTypeVal', bannerTypeVal);

					location.reload();
				});

			});

			//banner图切换方式
			function bannerTypeFn(bannerTypeVal) {

				var bannerBox = $('#bannerBox');
				//				var bannerTypeVal = sessionStorage.getItem('bannerTypeVal');
				var bannerTypeUl = bannerBox.children('ul');
				var bannerTypeLi = bannerBox.find('li');
				var rollNode = $('.rollNode');
				if(bannerTypeVal != null) {
					switch(bannerTypeVal.toString()) {
						case '1':
							//闪动切换
							bannerBox.removeClass('slideshow').removeClass('banner').addClass('flexslider');
							bannerTypeUl.addClass('slides');
							bannerTypeLi.removeClass('slideshow-image');
							rollNode.hide();

							$('.flexslider').flexslider({
								directionNav: true,
								pauseOnAction: false
							});
							break;
						case '2':
							//滑动切换
							bannerBox.removeClass('flexslider').removeClass('slideshow').addClass('banner');
							bannerTypeUl.removeClass('slides');
							bannerTypeLi.removeClass('slideshow-image');
							rollNode.show();

							bannerListFn(
								$(".banner"),
								$(".img-btn-list"),
								$(".left-btn"),
								$(".right-btn"),
								2000,
								true
							);

							break;
						default:
							//缩放切换
							bannerBox.removeClass('flexslider').removeClass('banner').addClass('slideshow');
							bannerTypeUl.removeClass('slides');
							bannerTypeLi.addClass('slideshow-image');
							rollNode.hide();

					}
				} else {
					//缩放切换
					bannerBox.removeClass('flexslider').removeClass('banner').addClass('slideshow');
					bannerTypeUl.removeClass('slides');
					bannerTypeLi.addClass('slideshow-image');
					rollNode.hide();
				}
			}
		</script>

	</body>

</html>